<script setup>
import { onMounted, onUnmounted, nextTick, watch, ref, onBeforeUnmount } from 'vue'
import ThreeApp from '../js/ThreeApp.js'
import { mainStore } from '../../../store/mainStore.js'
import { createImage } from '../js/captureSelectedArea.js'
import { titleData } from '../js/pageDate.js'
import { getLongitudeAndLatitude } from '/src/api/perceivedEffect/main.js'

let threeApp
const store = mainStore()

const showTitleData = ref(JSON.parse(JSON.stringify(titleData)))
store.carTipArr = showTitleData
const switchValue = ref(false)

const numToFixde = (num, key) => {
  const arr2Len = ['position-x', 'position-y', 'position-z', 'speed', 'width', 'height', 'length']
  if (arr2Len.includes(key)) {
    return num?.toFixed(2)
  } else if (key == 'longitude' || key == 'latitude' || key == 'elevation') {
    return num?.toFixed(7)
  } else {
    return num
  }
}

const getInfo = async () => {
  const res = await getLongitudeAndLatitude()
  return res?.data.data
}

onMounted(() => {
  nextTick(async () => {
    const config = await getInfo()
    threeApp = new ThreeApp(config)
    threeApp.init()
  })
})

// 卸载
onBeforeUnmount(() => {
  if (threeApp) threeApp.destroyed()
  // if (store.carWsConnect) store.carWsConnect.close()
})

watch(
  () => store.carData,
  (newVal) => {
    // 更新车流数据
    threeApp?.updateCarData(newVal)
  }
)
</script>

<template>
  <div class="webgl-container">
    <div id="webgl-perceivedEffect">
      <!-- 框选边框 -->
      <div
        id="captureBox"
        v-show="store.captureData.show"
        :style="{
          top: store.captureData.top + 'px',
          left: store.captureData.left + 'px',
          width: store.captureData.width + 'px',
          height: store.captureData.height + 'px',
        }"
      ></div>

      <!-- 标签盒子 -->
      <div id="carLabel" v-if="store.isShow2dLabelEffect && store.currentCarId != null">
        <p v-show="item.show" v-for="item in showTitleData" :key="item.id">
          <span style="">{{ item.title }}: </span>
          <span>{{ store.currentEffCarTip ? numToFixde(store.currentEffCarTip[item.dataKey], item.dataKey) : '' }}</span>
        </p>
      </div>

      <div class="saveBtn btn_bg" @click="createImage" v-show="store.captureData.showBtn">
        <p>保存</p>
      </div>
    </div>

    <div class="showBox" :style="{ right: switchValue ? '0px' : '-140px' }">
      <img :class="!switchValue ? 'tran' : ''" src="/public/perceivedEffect/close.png" @click="switchValue = !switchValue" />

      <!-- 内容 循环渲染即可 -->
      <div class="item">
        <p>目标选择</p>
        <el-switch v-model="store.isShow2dLabelEffect" size="small"></el-switch>
      </div>

      <div class="item">
        <p>目标标签选择显示：</p>
      </div>

      <div class="item2">
        <el-checkbox v-for="item in showTitleData" :key="item.id" v-model="item.show" :label="item.title" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.collapseStyle {
  position: absolute;
  left: -35px;
  top: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
#carLabel {
  position: absolute;
  min-width: 70px;
  padding-left: 2px;
  background: #fff;
  color: #000;
  border: 1px solid #999;
  font-size: 12px;
  > p {
    display: flex;
    > span:nth-child(1) {
      font-weight: 700;
    }
    > span:nth-child(2) {
      margin-left: 6px;
    }
  }
}

.tip {
  position: absolute;
  top: 10px;
  z-index: 999;
}

.showBox {
  width: 160px;
  height: 400px;
  position: absolute;
  top: 50%;
  right: -140px;
  transform: translateY(-50%);
  max-width: 140px;
  border: 1px solid #bbb;
  background: #fff;
  transition: right 0.26s ease-in-out;
  font-size: 14px;
  .item {
    display: flex;
    align-items: center;
    .el-switch {
      margin-left: 16px;
    }
  }

  .item2 {
    display: flex;
    flex-direction: column;
    font-size: 14px;
  }
  img {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    transform: rotateY(-50%);
    left: -20px;
    cursor: pointer;
  }

  .tran {
    transform: rotate(180deg);
  }
}

.webgl-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#webgl-perceivedEffect {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#captureBox {
  position: absolute;
  width: 2px;
  height: 2px;
  border: 1px solid green;
  pointer-events: none;
}

.saveBtn {
  position: absolute;
  z-index: 9;
  right: 10px;
  bottom: 10px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.title {
  font-size: 14px;
  font-weight: 700;
}
</style>

<style lang="less">
.webgl-container {
  .el-checkbox {
    height: 20px;
    padding-left: 10px;
    margin-top: 5px;
  }
}
</style>
